<template>
  <!-- 添加订单页面 -->
  <div class="box">
    <h1>添加订单</h1>
    <hr />
    <div class="main clear">
      <div class="left">
        <div>
          订单类型:
          <div>
            <el-select v-model="type" class="input2" @change="typeChange(type)">
              <el-option v-for="item in getTypeData" :key="item.typeId" :label="item.orderType" :value="item.orderType">
              </el-option>
            </el-select>
          </div>
        </div>
        <div>
          接车地址:
          <div class="jieChe clear">
            <el-input v-model="receivePosition" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>

        <div>
          车牌号:
          <div>
            <el-input v-model="carId" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>
        <div>
          发动机号:
          <div>
            <el-input v-model="engineNumber" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>

      </div>
      <div class="middle">
        <div>
          接车时间:
          <div>
            <el-input v-model="input" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>
        <!-- 接车司机 -->
        <div>
          接车司机:
          <div class="jieChe clear">
            <el-select v-model="driverArea" placeholder="选择区域" class="input1" @change="driverChange(driverArea)">
              <el-option v-for="item in areaData" :key="item.id" :label="item.area" :value="item.area">
              </el-option>
            </el-select>

            <el-select v-model="driver" placeholder="接车司机" class="input1">
              <el-option v-for="item in driverData" :key="item.id" :label="item.name" :value="item.name">
              </el-option>
            </el-select>
          </div>
        </div>
        检测场:
        <div class="Bottom15px clear">
          <el-select v-model="inspectArea" placeholder="选择区域" class="input1" @change="checkChange(inspectArea)">
            <el-option v-for="item in areaData" :key="item.id" :label="item.area" :value="item.area">
            </el-option>
          </el-select>
          <el-select v-model="inspectName" placeholder="请选择检测场" class="input1">
            <el-option v-for="item in inspectNameData" :key="item.id" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </div>


        <div>
          4S店:
          <div class="Bottom15px clear">
            <el-select v-model="s4AreaData" placeholder="选择区域" class="input1" @change="s4Change(s4AreaData)">
              <el-option v-for="item in areaData" :key="item.id" :label="item.area" :value="item.area">
              </el-option>
            </el-select>
            <el-select v-model="s4Shop" placeholder="请选择4S店" class="input1">
              <el-option v-for="item in s4ShopData" :key="item.id" :label="item.shortName" :value="item.shortName">
              </el-option>
            </el-select>
          </div>
        </div>

      </div>
      <div class="right">

        <div>
          订单状态:
          <div>
            <el-select v-model="orderStatus2" class="input2" @change="orderStatusChange(orderStatus2)">
              <el-option v-for="item in getStatusData" :key="item.id" :label="item.orderStatus"
                :value="item.orderStatus">
              </el-option>
            </el-select>
          </div>
        </div>
        <div>
          用户姓名:
          <div>
            <el-input v-model="username" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>
        <div>
          用户电话:
          <div>
            <el-input v-model="phone" placeholder="请输入电话号码" class="input2"></el-input>
          </div>
        </div>
        <div>
          备注:
          <div>
            <el-input v-model="tip" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>
      </div>
    </div>
    <!-- 保存按钮 -->
    <div class="save">
      <el-button type="primary" class="saveBtn" @click="
        orderAdd(
          carId,
          driver,
          driverArea,
          username,
          phone,
          type,
          typeId,
          orderStatus2,
          statusId,
          tip,
          engineNumber,
          s4AreaId,
          s4AreaData,
          inspectArea,
          s4Shop,
          inspectName,
          receivePosition
        )
      ">保存
      </el-button>
      <el-button type="primary" @click="cancel" class="cancelBtn">取消</el-button>
    </div>
  </div>
</template>
    

<script>
export default {
  created() {
    this.getType();
    this.getStatus();
    //查询所有区域
    this.selectAll();
  },
  data() {
    return {
      //新增订单的数据
      carId: "",
      username: "",
      phone: "",
      // 发动机编号
      engineNumber: "",
      //4S店区域数据
      s4AreaData: "",
      s4AreaId: "",
      //4S店数据
      s4ShopData: [],
      s4Shop: "",
      //司机区域数据
      driverArea: "",
      //接车司机数据
      driverData: [],
      driver: "",
      //区域数据,公用
      areaData: [],
      // 备注
      tip: "",
      //订单类型数据
      getTypeData: [],
      typeId: "",
      type: "",
      //
      input: "未处理",
      radio: "1",

      // 接车地址
      receivePosition: "",
      //检测场区域数据
      inspectArea: "",
      //检测场数据
      inspectName: "",
      inspectNameData: [],
      // 订单状态下拉框
      getStatusData: [],
      orderStatus2: "",
    };
  },
  methods: {
    //取消按钮
    cancel(){
      this.$router.push('/order')
    },
    //新增订单
    orderAdd(
      carId,
      driver,
      driverArea,
      username,
      phone,
      type,
      typeId,
      orderStatus2,
      statusId,
      tip,
      engineNumber,
      s4AreaId,
      s4AreaData,
      inspectArea,
      s4Shop,
      inspectName,
      receivePosition
    ) {
      
      // console.log('发送新增的数据', carId, driver, driverArea, username, phone, type)
      this.$http({
        url: "/order/addByBackStage",
        method: "POST",
        data: {
          carId,
          driver,
          driverArea,
          username,
          phone,
          statusId,
          orderStatus: orderStatus2,
          type,
          typeId,
          receivePosition,
          engineNumber,
          tip,
          s4AreaId,
          s4AreaData,
          inspectArea,
          s4Shop,
          inspectName,
        },
      })
        .then((res) => {
          console.log("新增成功", res);
        })
        .catch(() => { });
        this.$router.push('/order');
    },
    // 数据转化为数组包含对象 用于下拉选择框数据处理
    // toArr(res) {
    //     var shuju = []
    //     for (var i = 0; i < res.length; i++) {
    //         var obj = {
    //             value: '',
    //             label: ''
    //         };
    //         obj.value = res[i];
    //         obj.label = res[i];

    //         shuju.push(obj)

    //     }
    //     // console.log('toarr', shuju)
    //     return shuju
    // },
    // 下拉选择框：获取订单类型
    //获取订单类型
    getType() {
      this.$http({
        url: "/order/getType",
        method: "GET",
      })
        .then((res) => {
          // console.log('订单类型数据', res.data.data)
          this.getTypeData = res.data.data;
        })
        .catch((err) => {
          console.log("订单类型数据获取失败", err);
        });
    },
    // 下拉选择框，获取订单状态
    getStatus() {
      this.$http({
        url: "/order/getStatus",
        method: "GET",
      })
        .then((res) => {
          console.log("订单状态数据", res.data);
          this.getStatusData = res.data.data;
        })
        .catch((err) => {
          console.log("订单状态获取失败", err);
        });
    },
    // 查询所有区域
    selectAll() {
      this.$http({
        url: "/area/selectAll",
        method: "POST",
      })
        .then((res) => {
          console.log("查询所有区域数据成功", res.data.data);
          this.areaData = res.data.data;
        })
        .catch((err) => {
          console.log("查询所有区域获取失败", err);
        });
    },
    // 联动区域查询司机
    selectDriver(areaName) {
      this.$http({
        url: "/area/selectDriver",
        method: "GET",
        params: {
          areaName,
        },
      })
        .then((res) => {
          console.log("联动区域查询司机数据成功", res.data.data[0]);
          this.driverData = res.data.data[0];
        })
        .catch((err) => {
          console.log("联动区域查询司机失败", err);
        });
    },
    driverChange(areaName) {
      // item.area
      console.log("传入的值", areaName);
      this.selectDriver(areaName);
    },
    // 联动查询此区域的4s店
    selectFourS(areaName) {
      this.$http({
        url: "/area/selectFourS",
        method: "GET",
        params: {
          areaName,
        },
      })
        .then((res) => {
          console.log("联动查询此区域的4s店数据成功", res.data.data[0]);
          this.s4ShopData = res.data.data[0];
        })
        .catch((err) => {
          console.log("联动查询此区域的4s店失败", err);
        });
    },
    s4Change(areaName) {
      this.selectFourS(areaName);
      this.foundS4Area(areaName);
    },
    // 联动区域查询此区域的修理厂
    selectRepairF(areaName) {
      this.$http({
        url: "/area/selectRepairF",
        method: "GET",
        params: {
          areaName,
        },
      })
        .then((res) => {
          console.log("联动区域查询此区域的修理厂数据成功", res.data.data[0]);
          this.inspectNameData = res.data.data[0];
        })
        .catch((err) => {
          console.log("联动区域查询此区域的修理厂失败", err);
        });
    },
    checkChange(inspectArea) {
      this.selectRepairF(inspectArea);
    },

    //判断下拉框文字，来寻找ID 订单类型
    foundType(type) {
      for (var i = 0; i < this.getTypeData.length; i++) {
        if (this.getTypeData[i].orderType == type) {
          this.typeId = this.getTypeData[i].typeId;
          return;
        }
      }
    },
    typeChange(type) {
      this.foundType(type);
      console.log("change", this.typeId);
    },

    //判断下拉框文字，来寻找ID 支付状态
    foundStatus(type) {
      for (var i = 0; i < this.getStatusData.length; i++) {
        if (this.getStatusData[i].orderStatus == type) {
          this.statusId = this.getStatusData[i].id;
          return;
        }
      }
    },
    orderStatusChange(type) {
      this.foundStatus(type);
      console.log("change", this.typeId);
    },

    //判断下拉框文字，来寻找ID 4s店区域
    foundS4Area(type) {
      for (var i = 0; i < this.areaData.length; i++) {
        if (this.areaData[i].area == type) {
          this.s4AreaId = this.areaData[i].id;
          return;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  min-width: 1200px;
 

  h1 {
    font-size: 30px;
  }

  hr {
    margin: 20px 0 20px 0;
    border-top: 2px solid rgba(128, 128, 128, 0.753);
  }

  .main {
 margin: 0 auto;
 width: 1200px;
    .left,
    .middle,
    .right {
      float: left;
      margin-right: 40px;
      margin-left: 80px;

    }
  }


  .save {
    text-align: center;
    margin-top: 30px;

    .saveBtn {
      margin-right: 50px;
    }

    .cancelBtn {
      margin-left: 50px;
    }
  }

  .jieChe {
    height: 40px;
    margin: 15px 0px 20px 0;
  }

  .Bottom15px {
    margin: 15px 0px 15px 0;
  }

  .input1 {
    float: left;
    margin-right: 20px;
    width: 120px;
  }

  .input2 {
    width: 260px;
    margin: 15px 0px 15px 0;
  }
}
</style>